<template>
    <div class="articleListBox" ref="meArticle">
        <div class="clearFix operationBox">
            <!-- tab -->
            <!-- <span>文章管理</span><br> -->
            <div class="btns">
                <span v-if="isSlef" :class="{'btnsActive':isList==null}"
                    @click="articTab('write')">{{isArticleEdit?'编辑':isResrarchGroup?'添加教研活动':'添加教研组'}}</span>
                <el-divider v-if="isSlef" direction="vertical"></el-divider>
                <span :class="{'btnsActive':isList==false}" @click="articTab('abstract')">摘要</span>
                <el-divider direction="vertical"></el-divider>
                <span :class="{'btnsActive':isList==true}" @click="articTab('list')">列表</span>
            </div>
            <!-- 批量管理 -->
            <div class="term" v-if="isList !==null && isSlef" >
                <el-button type="text" class="batch" @click="isAdministration = !isAdministration"
                    v-if="isList !==null">批量管理</el-button>
                <el-dropdown trigger="click" v-if="isList !==null">
                    <el-button type="text">排序</el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <el-button type="text" @click="sortChange(0)">发表时间</el-button>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <el-button type="text" @click="sortChange(1)">最新修改</el-button>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <!-- 批量管理展开操作 -->
        <div class="operation" v-if="isAdministration && isSlef">
            <el-checkbox :indeterminate="check.length>0&&!isIndeterminate?true:false" v-model="checkAll"
                @change="handleCheckAllChange">全选
            </el-checkbox>
            <el-button type="text" style="margin-left: 10px;" @click="dialogTableVisible=true">权限设置</el-button>
            <!-- <el-button type="text" style="margin: 0 15px;" @click="updateType()" v-if="articleTab!='collection'">修改分类
            </el-button> -->
            <el-button type="text" @click="articleDelete()">删除</el-button>
            <el-button type="text" class="batch" @click="isAdministration = !isAdministration">完成批量管理</el-button>
            <!-- &nbsp;&nbsp;<el-button type="text" @click="collectRemove()" v-if="articleTab=='collection'">移除收藏</el-button> -->
        </div>
        <!-- 文章列表 -->
        <div>
            <ul class="listWrap" ref="articleList">
                <!-- 写文章 -->
                <li v-if="isList ==null">
                    <el-form ref="form" label-width="75px">
                        <el-form-item label="名称">
                            <el-input placeholder="请输入标题,最长30个字符" v-model="articleTitle" maxlength="30"></el-input>
                        </el-form-item>
                        <el-form-item label="说明内容">
                            <!-- <Wangeditor ref="editorElem" :catchData="articleData" @catchData="catchData"></Wangeditor> -->
                            <TinymceEditor v-model="content" ref="tinymceeditor"></TinymceEditor>
                        </el-form-item>
                        <el-form-item label="反思" v-if="isResrarchGroup">
                            <el-input placeholder="请输入" v-model="teachReflect"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form ref="form" label-width="75px">
                                <el-form-item label="设置封面:">
                                    <el-upload class="avatar-uploader" :action="'' | baseUpPUrl" :show-file-list="false"
                                        :on-success="handleAvatarSuccess" :on-change="handleChange"
                                        accept=".jpg,.jpeg,.png,.JPG,.JPEG.PNG">
                                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                        <el-button v-else size="small" type="primary">点击设置</el-button>
                                    </el-upload>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="5" v-if="isResrarchGroup">
                            <el-form ref="form" label-width="75px">
                                <el-form-item label="资源上传:">
                                    <el-button size="small" type="primary" @click="dialogResouces">点击上传</el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <!-- <el-col :span="5" v-if="!isResrarchGroup">
                            <el-form ref="form" label-width="75px">
                                <el-form-item label="组员管理:">
                                    <el-button size="small" type="primary" @click="addMember">组员管理</el-button>
                                </el-form-item>
                            </el-form>
                        </el-col> -->
                    </el-row>
                    <el-row :gutter="20" v-if="isResrarchGroup">
                        <el-col :span="6">
                            <el-form ref="form" label-width="75px">
                                <el-form-item label="权限:">
                                    <el-select v-model="permission" placeholder="请选择">
                                        <el-option v-for="item in permissionArr.slice(0,2)" :key="item.id" :label="item.name"
                                            :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="6">
                            <el-form ref="form" label-width="75px">
                                <el-form-item label="活动类型:">
                                    <el-select v-model="activityType" placeholder="请选择">
                                        <el-option label="主题" value="100"></el-option>
                                        <el-option label="课例" value="101"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" v-if="isResrarchGroup">
                        <el-col :span="12">
                            <el-form ref="form" label-width="75px">
                                <el-form-item label="活动时间:">
                                    <el-date-picker v-model="activityTime" type="datetimerange" range-separator="至"
                                        placeholder="请选择活动时间" start-placeholder="开始日期" end-placeholder="结束日期"
                                        value-format="yyyy-MM-dd HH:mm:ss">
                                    </el-date-picker>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" v-if="!isResrarchGroup">
                        <el-col :span="3" :offset="20">
                            <el-button type="text" @click="articTab('list')">取消</el-button>
                            <el-button type="text" @click="addArticle(0)">确定</el-button>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" v-if="isResrarchGroup">
                        <!-- <el-col :span="3" :offset="2">
                            <el-form ref="form" :inline="true" label-width="60px">
                                <el-form-item label>
                                    <el-checkbox v-model="isNoReprint">禁止转载</el-checkbox>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col :span="2">
                            <el-form ref="form" :inline="true" label-width="60px">
                                <el-form-item label>
                                    <el-checkbox v-model="isToping">置顶</el-checkbox>
                                </el-form-item>
                            </el-form>
                        </el-col> -->
                        <el-col :span="3" :offset="20">
                            <el-button type="text" @click="articTab('list')">取消</el-button>
                            <el-button type="text" @click="addArticle(1)">确定</el-button>
                        </el-col>
                    </el-row>
                </li>
                <!-- 文章列表 -->
                <li class="list" v-else v-for="(item, index) in articleSchoolList.list" :key="index">
                    <div class="listTitleWarp clearFix">
                        <div class="listTitle">
                            <el-checkbox-group v-model="check" v-if="isAdministration" @change="handleCheckChange">
                                <el-checkbox :label="item"><span @click="goReading(item)">{{item.title}}</span>
                                </el-checkbox>
                            </el-checkbox-group>
                            <span v-if="!isAdministration" @click="goReading(item)">{{item.title}}</span>
                        </div>
                        <div class="btn" v-if="isSlef">
                            <span class="time">{{item.creationtime}}</span>
                            <el-dropdown trigger="click">
                                <el-button type="text">操作</el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>
                                        <el-button type="text" @click="articleEdit(item)" style="width:100%">
                                            &emsp;&emsp;编辑&emsp;&emsp;</el-button>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <el-button type="text" @click="articleDelete(item)">删除</el-button>
                                    </el-dropdown-item>
                                    <el-dropdown-item v-if="isResrarchGroup">
                                        <el-button type="text" @click="updatePermission(item)">权限</el-button>
                                    </el-dropdown-item>
                                    <!-- <el-dropdown-item>
                                        <el-button type="text" @click="updateType(item)">修改分类</el-button>
                                    </el-dropdown-item> -->
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>
                    <div class="substance" v-if="!isList">
                        <p @click="goReading(item)" v-html="item.describe || item.content"></p>
                        <p>
                            <el-button type="text">阅读（{{item.viewnum}}）</el-button>
                            <el-button type="text">评论（{{item.commentnum}}）</el-button>
                            <!-- <el-button type="text" @click="collectRemove(item)" v-if="articleTab =='collection'">移除收藏</el-button>
                            <el-button type="text" v-if="articleTab=='friendArticle'" @click="collect(item)">收藏</el-button> -->
                        </p>
                    </div>
                </li>
                <li v-if="articleSchoolList.total==0 && isList !==null">
                    <span>暂没有文章数据.....</span>
                </li>
            </ul>
        </div>
        <!-- 权限设置 -->
        <el-dialog title="权限设置" width="650px" :visible.sync="dialogTableVisible">
            <el-radio-group v-model="upPermission">
                <el-radio :label="item.id" v-for="(item, index) in permissionArr.slice(0,2)" :key="index">{{item.name}}</el-radio>
            </el-radio-group>
            <div class="Popubtn">
                <el-button type="primary" @click="updatePermissionDo()" plain>确定</el-button>
                <el-button plain @click="dialogTableVisible=false">取消</el-button>
            </div>
        </el-dialog>
        <!-- 管理组员 -->
        <el-dialog title="管理组员" width="50%" :visible.sync="dialogAddMemberVisible" @close="closeResouces">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column fixed prop="date" label="日期" width="150">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="120">
                </el-table-column>
                <el-table-column prop="province" label="省份" width="120">
                </el-table-column>
                <el-table-column prop="city" label="市区" width="120">
                </el-table-column>
                <el-table-column prop="address" label="地址" width="300">
                </el-table-column>
                <el-table-column prop="zip" label="邮编" width="120">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="Popubtn">
                <el-button plain @click="dialogAddMemberVisible=false">关闭</el-button>
            </div>
        </el-dialog>
        <!-- 资源上传 -->
        <el-dialog title="资源上传" width="650px" :visible.sync="dialogResoucesVisible" @close="closeResouces">
            <el-tabs v-model="activeName">
                <el-tab-pane label="图片上传" name="1">
                    <el-upload :action="'' | baseUpPUrl" list-type="picture-card" :auto-upload="true" multiple
                        accept=".jpg,.jpeg,.png,.JPG,.JPEG.PNG" :file-list="fileListP" :on-change="handleChangeP">
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{file}">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                    <i class="el-icon-zoom-in"></i>
                                </span>
                                <!-- <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                                    <i class="el-icon-delete"></i>
                                </span> -->
                            </span>
                        </div>
                    </el-upload>
                </el-tab-pane>
                <el-tab-pane label="视频上传" name="2">
                    <el-upload class="upload-demo" :action="'' | baseUpPUrl" :on-preview="handlePreview"
                        accept=".mp4,.avi,.rmvb,.flv" :on-remove="handleRemove" :limit="1" :auto-upload="true"
                        :on-exceed="handleExceed" :file-list="fileListV" :before-upload="beforeAvatarUpload"
                        :on-change="handleChangeV">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-tab-pane>
            </el-tabs>
            <div class="Popubtn">
                <el-button plain @click="dialogResoucesVisible=false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    import Wangeditor from "@/components/wangeditor/wangeditor";
    import TinymceEditor from '@/components/wangeditor/TinymceEditor'
    import {
        pictureUrl
    } from '@/utils/filter'
    import costumeRecordVue from '../../views/pages/personal/costumeRecord.vue';
    export default {
        props: ['articleSchoolList', 'activeNameIn', 'articleConfig', 'isResrarchGroup', 'isListN','isSlef'],
        computed: {
            ...mapState({
                // 分页插件参数统一配置
                paginationParams: state => state.commonModule.paginationParams,
                // 权限列表
                permissionArr: state => state.commonModule.permissionArr,
                // 用户详细信息
                userInfo: state => state.userModule.userInfo,
                otherUserInfo: state => state.userModule.otherUserInfo,
                changeToList: state => state.commonModule.changeToList,
                group: state => state.researchModule.group
            })
        },
        watch: {
            changeToList(val) {
                this.isList = true
                this.articTab('list')
            },
            isAdministration(val) {
                this.check = []
                this.checkAll = false
            },
            activeNameIn(val) {
                this.articTab('list')
                this.isDetailShow = false
                this.$emit("cShowPagin", true);
            },
        },
        components: {
            Wangeditor,
            TinymceEditor
        },
        created() {
            if (this.articleConfig && this.articleConfig.homearticlemode == 2) {
                this.articTab('abstract')
            } else {
                this.articTab('list')
            }
            if (this.activeNameIn.split(',')[0] == '91' || this.activeNameIn.split(',')[0] == '97') {
                this.isResrarchGroup = true
            } else if (this.activeNameIn.split(',')[0] == '93') {
                this.isResrarchGroup = false
            }
        },
        watch: {
            paginationParams: {
                //深度监听，可监听到对象、数组的变化
                handler(val, oldVal) {
                    this.check = []
                    this.checkAll = []
                    this.$emit('articleSchool');
                },
                deep: true //true 深度监听
            }
        },
        data() {
            return {
                teachReflect: '',
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 弄',
                    zip: 200333
                }],
                dialogAddMemberVisible: false,
                activityTime: [],
                activityType: '101',
                fileListV: [],
                fileListP: [],
                fileList: [],
                activeName: '1',
                content: "",
                dialogResoucesVisible: false,
                imageUrl: '',
                upPermission: 5,
                upType: null,
                isArticleEdit: false,
                isDraft: 1,
                isNoReprint: false,
                updateArticleId: null,
                isToping: false,
                articleClassification: "1024", // 分类
                permission: 5, // 权限
                checkList: ["复选框 A"],
                articleTitle: "", // 文章标题
                editorContent: "", // 写文章暂存
                isList: true,
                isAdministration: false,
                checkAll: false,
                isIndeterminate: false,
                check: [],
                radio: "",
                videoUrl: '',
                dialogTableVisible: false,
                dialogTypeVisible: false,
                articleTemporary: {}, //文章暂存
                activityCache: {}
            };
        },
        methods: {
            sortChange(params) {
                this.$emit('articleSchool', params, true);
            },
            handleClick(row) {},
            addMember() {
                this.dialogAddMemberVisible = true
            },
            handlePreview() {},
            handleExceed(file) {},
            handleRemove(file) {
                this.fileListV = []
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleChange(file, fileList) {
                this.fileList = fileList
            },
            handleChangeP(file, fileList) {
                this.fileListP = fileList
            },
            beforeAvatarUpload(file, fileList) {
                if (file.type != 'video/mp4') {
                    this.$message.error('只支持上传MP4格式的视频!')
                    return false
                }
            },
            handleChangeV(file, fileList) {
                this.fileListV = fileList
            },
            handleDownload(file) {},
            closeResouces() {
                this.isList = null
            },
            dialogResouces() {
                this.dialogResoucesVisible = true
                // this.isList = 4
            },
            handleAvatarSuccess(res, file) {
                if(res.code == 400){
                    this.$message.warning("图片上传失败！")
                }
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            handleCheckChange(params) {
                if (this.check.length == this.articleSchoolList.total) {
                    this.isIndeterminate = true
                } else {
                    this.isIndeterminate = false
                }
            },
            // 全选框选择时触发
            handleCheckAllChange(params) {
                if (params) {
                    this.isIndeterminate = true
                    this.check = this.articleSchoolList.list
                } else {
                    this.check = []
                    this.isIndeterminate = false
                }
            },
            // 批量操作设置权限
            updatePermission(params) {
                this.upPermission = params.jurisdictionid
                this.dialogTableVisible = true
                this.articleTemporary = params
            },
            // 批量操作设置权限
            updatePermissionDo() {
                var ids = ''
                if (this.articleTemporary.id) {
                    ids += this.articleTemporary.id
                } else {
                    if (this.check.length > 0) {
                        this.check.map(item => {
                            ids += ',' + item.id
                        })
                    } else {
                        this.$message.warning('请先选择数据')
                        this.dialogTableVisible = false
                        return
                    }
                }
                if (ids) {
                    this.$store
                        .dispatch("articleModule/jurisdiction", {
                            jurisdictionid: this.upPermission,
                            ids: ids,
                            userid: this.userInfo.id,
                            isActivity: 1 //教研活动修改权限标识
                        })
                        .then(res => {
                            if (res.data.code == 200) {
                                this.$emit('articleSchool');
                                this.dialogTableVisible = false
                            } else {
                                this.$message.warning(res.data.msg)
                            }
                        });
                }
            },
            initData() {
                if (this.isArticleEdit) {

                } else {
                    this.permission = 5
                    this.imageUrl = ''
                    this.articleTitle = ''
                    this.content = ''
                    this.fileListP = []
                    this.fileListV = []
                    this.teachReflect = ''
                    this.activityTime = []
                    this.activityType = '101'
                }
            },
            // 编辑文章或者草稿
            articleEdit(params, type) {
                if (type == 'drafts') {
                    this.isArticleEdit = false
                } else {
                    this.isArticleEdit = true
                }
                this.activityCache.id = params.id
                this.articleTitle = params.title
                this.articleClassification = params.classify ? params.classify : "1025"
                this.permission = params.jurisdictionid
                this.isNoReprint = params.reprint
                this.isToping = false
                this.imageUrl = pictureUrl(params.cover)
                this.content = params.content || params.describe
                this.teachReflect = params.teachReflect
                this.activityCache = params
                this.videoUrl = params.video
                this.activityTime[1] = params.endTime
                this.activityTime[0] = params.starTime
                this.fileListP = []
                if (params.urls) {
                    params.urls.split(',').map(item => {
                        if (item) {
                            this.fileListP.push(item)
                        }
                    })
                }
                this.activityType = params.dictype + ''
                if (params.cover) {
                    this.fileList.push(params.cover)
                }
                this.articTab("write", true)
            },
            // 删除文章或者草稿
            articleDelete(params, isDraft) {
                var ids = ''
                if (params) {
                    ids = params.id
                } else {
                    if (this.check.length > 0) {
                        this.check.map(item => {
                            ids += ',' + item.id
                        })
                    } else {
                        this.$message.warning('请先选择数据')
                        return
                    }
                }
                var urls = 'researchModule/groupDel'
                if (this.activeNameIn.split(',')[0] == '93' || this.activeNameIn.split(',')[0] == '97') {
                    urls = 'researchModule/activityDel'
                }
                this.$store
                    .dispatch(urls, {
                        ids: ids,
                        userid: this.otherUserInfo.id
                    })
                    .then(res => {
                        if (res.data.code == 200) {
                            this.$message.success('删除成功')
                            this.$emit('articleSchool');
                        }
                    });
            },
            // 新增文章
            addArticle(params) {
                // this.isArticleEdit = false
                this.isDraft = params;
                if (this.articleTitle != "" && this.content != '') {
                    if (this.activeNameIn.split(',')[0] == '91') {
                        this.$store.dispatch('researchModule/groupCreate', {
                            id: this.activityCache.id,
                            cover: this.fileList[0] ? this.fileList[0].response ?
                                this.fileList[0].response.result.originalUrl : this.fileList[0] : '',
                            describe: "" + this.content + "",
                            title: this.articleTitle,
                        }).then(res => {
                            if (res) {
                                this.fileList = []
                                this.$message.success("添加成功")
                                this.$emit('articleSchool');
                                this.articTab("list");
                            }
                        })
                    } else if (this.activeNameIn.split(',')[0] == '93' || this.activeNameIn.split(',')[0] == '97') {
                        var urlsStr = []
                        if (this.fileListP.length > 0) {
                            this.fileListP.map(item => {
                                if (item.response && item.response.result.originalUrl) {
                                    urlsStr.push(item.response.result.originalUrl)
                                } else if (item.url) {
                                    urlsStr.push(item.url)
                                }
                            })
                        }
                        this.$store.dispatch(this.isArticleEdit ? 'researchModule/activityUpdate' :
                            'researchModule/activityCreate', {
                                id: this.isArticleEdit ? this.activityCache.id : null,
                                cover: this.isArticleEdit ? this.fileList[0] ? this.fileList[0] : '' : this
                                    .fileList[0] ? this.fileList[0].response.result.originalUrl : '',
                                content: "" + this.content + "",
                                title: this.articleTitle,
                                urls: urlsStr.join(','),
                                groupId: this.group.id,
                                dictype: this.activityType,
                                endTime: this.activityTime[1],
                                starTime: this.activityTime[0],
                                video: this.fileListV[0] ? this.fileListV[0].response.result.originalUrl : this
                                    .videoUrl,
                                jurisdictionid: this.jurisdictionid,
                                teachReflect: this.teachReflect,
                            }).then(res => {
                            if (res) {
                                this.fileList = []
                                this.fileListV = []
                                this.articleTitle = ''
                                this.content = ''
                                if (this.isArticleEdit) {
                                    this.$message.success("更新成功")
                                } else {
                                    this.$message.success("添加成功")
                                }
                                this.$emit('articleSchool');
                                this.articTab("list");
                            }
                        })
                    } else {
                        this.$store.dispatch("articleModule/articleIssue", {
                                dictype: this.activeNameIn ? this.activeNameIn.split(',')[0] : 78,
                                id: (this.isDraft == 0 || this.isArticleEdit) ? this.updateArticleId : null,
                                content: "" + this.content ? this.content : edit + "",
                                classify: this.articleClassification,
                                draft: 1,
                                isDisabledForward: this.isNoReprint,
                                isTop: this.isToping,
                                title: this.articleTitle,
                                userid: this.otherUserInfo.id,
                                jurisdictionid: this.permission
                            })
                            .then(res => {
                                if (res.data.code == 200) {
                                    if (res.data.result) {
                                        this.updateArticleId = res.data.result;
                                        if (this.isDraft == 0) {
                                            this.$message.success("添加草稿成功");
                                        }
                                    }
                                    if (this.isDraft == 1) {
                                        this.articleTitle = "";
                                        this.$message.success("操作成功");
                                        this.content = ''
                                        this.$emit('articleSchool');
                                        this.articTab("list");
                                    }
                                }
                            });
                    }
                } else {
                    this.$message.warning("请先输入新内容");
                }
                // this.$refs.editorElem.provideDatas();
            },
            // 切换tab时
            articTab(param, param1) {
                if (param == "abstract") {
                    this.isList = false;
                    this.isArticleEdit = false
                    this.$emit("cShowPagin", true);
                }
                if (param == "list") {
                    this.isArticleEdit = false
                    this.isList = true;
                    this.$emit("cShowPagin", true);
                }
                if (param == "write") {
                    if (param1) {

                    } else {
                        this.isArticleEdit = false
                        this.activityCache.id = null
                    }
                    this.isAdministration = false
                    this.isList = null;
                    this.initData()
                    this.$emit("cShowPagin", false);
                }
            },
            // 调转文章详情
            goReading(params) {
                //     var type = 2
                //     if (this.activeNameIn.split(',')[0] == '91' || this.activeNameIn.split(',')[0] == '97') {
                //         type = 3
                //     } else if (this.activeNameIn.split(',')[0] == '93') {
                //         type = 2
                //     }
                //     this.$router.push({path:'/research/researchOther/researchReadDetails',query:{
                //         article: params,
                //         junmpType: type}})
            }
        }
    };
</script>

<style lang="scss" scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 108px;
        height: 108px;
        display: block;
    }

    .el-row {
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .articleListBox {
        .operationBox {
            box-sizing: border-box;
            padding: 8px 0;
            border-bottom: 1px solid #909399;

            .btns {
                float: left;
                margin-top: 12px;
                color: #909399;
                font-size: 14px;

                span {
                    cursor: pointer;
                    box-sizing: border-box;
                    padding: 5px 8px;
                }

                span.btnsActive {
                    background-color: #409eff;
                    color: white;
                }
            }

            .term {
                float: right;

                .batch {
                    margin-right: 20px;
                }
            }
        }

        .operation {
            box-sizing: border-box;
            padding: 8px 0;
            border-bottom: 1px solid #909399;
            text-align: left;
        }

        .listWrap {
            margin-top: 20px;
            list-style-type: none;
            margin-block-start: 0;
            margin-block-end: 0;
            padding-inline-start: 0;

            .list {
                box-sizing: border-box;
                padding-bottom: 5px;
                border-bottom: 1px dashed #909399;
                margin-top: 10px;
                cursor: pointer;

                .listTitleWarp {
                    .listTitle {
                        float: left;
                        font-size: 14px;
                        color: #303133;
                        margin-top: 12px;
                    }

                    .btn {
                        float: right;

                        .time {
                            font-size: 14px;
                            color: #303133;
                            margin-right: 12px;
                        }
                    }
                }

                .substance {
                    font-size: 14px;
                    color: #303133;

                    p {
                        margin-block-start: 0;
                        margin-block-end: 0;
                        text-align: left;

                        .time {
                            margin-right: 15px;
                        }
                    }

                    p:first-of-type {
                        text-indent: 24px;
                        text-align: justify;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                    }
                }
            }
        }
    }

    .clearFix::after {
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }

    .Popubtn {
        margin-top: 25px;
    }
</style>